<template>
    <div>
        <h1>我是学生管理页面</h1>
        <table>
            <thead>
                <tr>
                    <th>学生姓名</th>
                    <th>学生性别</th>
                    <th>身份证号</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in curPageData" :key="item.stuid">
                    <td>{{item.stuName}}</td>
                    <td>{{item.stuSex}}</td>
                    <td>{{item.stuid}}</td>
                    <td>
                        <button class="caoZuoBtn deleBtn btn btn-sm btn-warning btn-primary" @click="deleCurData(item.stuid)">删除</button>
                        <button class="caoZuoBtn editBtn btn btn-sm btn-warning btn-primary" @click="editCurData(item)">修改</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="page">
            <span class="prevPage btn btn-sm btn-warning btn-primary" @click="toPrevPage">上一页</span>
            <span class="nextPage btn btn-sm btn-warning btn-primary" @click="toNextPage">下一页</span>
            <div class="pageNum">
                <span class="pageBtn" v-for="item in pageNum" :key="item" :class="{'curPageBtn':curPage===item}" @click="changePage(item)">{{item}}</span>
            </div>
        </div>
        <!-- 模态框 -->
        <div v-if="sample_modal">
            <div class="modal" v-on:click.self="sample_modal=false">
                <div class="modal-dialog">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">学生信息</h4>
                        <button type="button" class="close" v-on:click="sample_modal=false">×</button>
                    </div>
                    <div class="modal-body">
                        <p>
                            <label>学生姓名：<input type="text" v-model="curEditPage.stuName"></label><br/>
                            <label>学生性别：<input type="text" v-model="curEditPage.stuSex"></label><br/>
                            <label>学生证件：<input type="text" v-model="curEditPage.stuid" disabled></label>
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary afterEditBtn" @click="afterEditData(curEditPage)">确认修改</button>
                        <button type="button" class="btn btn-primary quXiaoBtn" @click="editPageHide">取消</button>
                    </div>
                    </div>
                </div>
            </div>
            <div class="modal-backdrop show"></div>
        </div>
    </div>
</template>
<script>
// import axios from 'axios'  //在main.j中已经在所有Vue实例中添加了axios原型对象，所有这句可以省略了
import * as api from '../utils/api'
export default {
    name:'Stu',
    data() {
        return {
            tableData:[],
            curPage:1,
            sample_modal:false,
            curEditPage:{
                stuid:'',
                stuName:'',
                stuSex:''
            }
        }
    },
    computed: {
        // 渲染当前页面
        curPageData(){
            let curPageData = this.tableData.slice((this.curPage-1)*10,(this.curPage-1)*10+10)
            // console.log(curPageData);
            return curPageData
        },
        pageNum(){
            return Math.ceil(this.tableData.length/10)
        }
    },
    created() {
        this.axios({
            url:api.GET_STUDENT,
            method:'get',
            parmas:{
                stuid: 1
            }
        }).then(data=>{
            // console.log(data);
            let getData = data.data.data
            this.tableData = getData
        }).catch(err=>{
            console.log(err);
        })       
    },
    methods: {
        changePage(num){
            // console.log(num);
            this.curPage = num
        },
        toPrevPage(){
            this.curPage<=1 ? this.curPage=1 : this.curPage--
        },
        toNextPage(){
            this.curPage>=this.pageNum ? this.curPage=this.pageNum : this.curPage++
        },
        deleCurData(curId){
            // console.log(curId);
            // 向后台发起ajax请求 删除当前stuid===curId的数据 再返回删除后的数据库
            this.tableData.forEach((item,i) => {
                if(item.stuid === curId){
                    this.tableData.splice(i,1)
                }
            });
        },
        editCurData(cur){
            this.sample_modal = true
            this.tableData.forEach(item=>{
                if(item.stuid === cur.stuid){
                    // this.curEditPage = item//将地址赋值给了curEditPage
                    this.curEditPage.stuid = item.stuid//将地址里面的值赋值给了curEditPage
                    this.curEditPage.stuName = item.stuName
                    this.curEditPage.stuSex = item.stuSex
                }
            })
        },
        afterEditData(cur){
            // console.log(cur);
            this.tableData.forEach(item=>{
                if(item.stuid === cur.stuid){
                    // item.stuid = cur.stuid
                    item.stuName = cur.stuName
                    item.stuSex = cur.stuSex
                    this.sample_modal = false
                }
            })
        },
        editPageHide(){
            this.sample_modal = false
        }

    },
}
</script>
<style lang="less" scoped>
    // .btn{
    //     display: inline-block!important;
    //     background-color: cornflowerblue!important;
    //     color: white!important;
    //     width: 80px!important;
    //     height: 50px!important;
    //     text-align: center!important;
    //     line-height: 50px!important;
    //     font-size: 20px!important;
    //     font-weight: bolder!important;
    //     margin-right: 10px!important;
    //     cursor: pointer!important;
    // }
    .page{
        margin-top: 10px;
    }
    .pageBtn{
        display: inline-block;
        width: 50px;
        height: 40px!important;
        font-size: 18px;
        color: white;
         text-align: center;
        line-height: 40px!important;
        cursor: pointer;
        margin-right: 5px;
        border-radius: 3px;
        background-color: cornflowerblue;
    }
    .curPageBtn{
        background-color: deeppink;
        color: white;
    }
    .pageNum{
        margin-top: 10px;
    }
    .caoZuoBtn{
        width: 70px;
        height: 36px;
        font-size: 18px;
        color: white;
        outline: none;
        border: none;
        cursor: pointer;
    }
    .deleBtn{
        background-color: deepskyblue;
    }
    .editBtn{
        background-color: cornflowerblue;
    }
    /* 让模态框显示 */
    .modal {
        display: block;
        p{
            text-align: center;
        }
    }

    /* 如果不使用vue的transition的话可以不设置 */
    .fade-enter-active, .fade-leave-active {
        transition: opacity .15s;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>